<template>
	<!-- 我的/收藏岗位 -->
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#f29100"
          ref="tabs"
          :list="list"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>

      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item
          :key="index"
          v-for="(item, index) in list"
          class="swiper-item"
        >
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <view class="order">
                <u-empty
                  v-if="orderList[index].length == 0"
                  class="empty"
                  text="暂无数据"
                  mode="list"
                ></u-empty>

                <view v-if="type">
                  <recruitmentItem1 :list="orderList[index]"
                /></view>

                <view v-else>
                  <recruitmentItem :list="orderList[index]" />
                </view>

                <u-loadmore
                  v-show="showBox"
                  :status="loadStatus[index]"
                  icon-type="flower"
                  margin-bottom="30"
                />
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
   
  </view>
</template>

<script>
import recruitmentItem1 from "./item1.vue";
import recruitmentItem from "./item.vue";
import empty from "@/components/empty/empty.vue";

import api from "../../../../api/routes.js";
export default {
  components: {
    recruitmentItem1,
    recruitmentItem,
    empty,
  },

  data() {
    return {
      	mask:false,
      type: 0,
      limit: 8,
      showBox: false,

      orderList: {
        0: [],
        1: [],
      },
      pages: [1, 1],

      list: [
        {
          name: "收藏岗位",
        },
        {
          name: "收藏工人",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      loadStatus: ["loadmore", "loadmore"],
      options2: [],
      cateList: [],
    };
  },
  onLoad() {
    this.getOrderList(0);
    this.getCateList();
    this.getCategrey();
  },

  methods: {
    async getCateList() {
      const res = await this.$myRequest({
        url: api.workTypeList,
        method: "GET",
        data: {},
      });
      let list1 = [];
      res.data.list.map((i) => {
        list1.push(...i.children);
      });
      this.cateList = list1;
    },
    async getCategrey() {
      const options = await this.$myRequest({
        url: api.dictionary,
        method: "GET",
        data: {
          code: "person_struct",
        },
      });

      this.options2 = options.data.list;
    },

    publish(type) {
      if (type == 1) {
        this.mask  =true;
      } else {
        uni.navigateTo({
          url: `/package/pages/release/secondHand`,
        });
      }
    },
    reachBottom() {
      // 此tab为空数据

      if (
        this.loadStatus[this.current] == "loading" ||
        this.loadStatus[this.current] == "nomore"
      ) {
        return;
      }
      this.getOrderList(this.current);
    },
    // 页面数据
    async getOrderList(idx) {
      console.log(idx);

      const res = await this.$myRequest({
        url: api.pageMyCollect,
        method: "POST",
        data: {
          page: this.pages[idx],
          limit: this.limit,
          collectType: idx == 0 ? "job" : "worker",
        },
      });

      if (res.data.code == 0) {
        let data = res.data.page.list;
        if (data.length < this.limit) {
          this.loadStatus[this.current] = "nomore";
        } else {
          this.pages[this.current] = this.pages[this.current] + 1;
          this.loadStatus[this.current] = "loadmore";
        }
        this.orderList[idx] = this.orderList[idx];
        this.orderList[this.current] = [
          ...this.orderList[this.current],
          ...data,
        ];

        console.log(this.cateList);

        if (idx == 0) {
          if (this.orderList[0] == 0) {
            this.showBox = false;
          } else {
            this.showBox = true;
          }
        } else {
          if (this.orderList[1] == 0) {
            this.showBox = false;
          } else {
            this.showBox = true;
          }
          this.orderList[1].map((i) => {
            let lis = this.options2.filter(
              (e) => e.dict_value == i.person_struct
            );
            let cate = this.cateList.filter((y) =>
              i.work_type_ids.includes(y.id)
            );
            this.$set(i, "personStruct", lis[0].dict_name);
            this.$set(i, "cate", cate);
          });
        }

        uni.stopPullDownRefresh();
      }
    },

    // tab栏切换
    change(index) {
      this.type = index;
      this.swiperCurrent = index;
      this.orderList[index] = [];
      this.pages[index] = 1;

      this.getOrderList(index);
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.type = current;
      this.orderList[current] = [];
      this.pages[current] = 1;
      this.getOrderList(current);
    },
  },
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.empty {
  display: block;
  margin: 100px auto;
}
.sticky {
  display: flex;
  align-items: center;
  background-color: #fffaf4;
  color: #f9aa45;
  padding: 15rpx 32rpx;
  font-size: 13px;

  .btn {
    margin: 0 20rpx;
  }
}

.order {
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .store {
        margin: 0 10rpx;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .right {
      color: $u-type-warning-dark;
    }
  }

  .item {
    display: flex;
    margin: 20rpx 0 0;

    .left {
      margin-right: 20rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      .title {
        font-size: 28rpx;
        line-height: 50rpx;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }

      .delivery-time {
        color: #e5d001;
        font-size: 24rpx;
      }
    }

    .right {
      margin-left: 10rpx;
      padding-top: 20rpx;
      text-align: right;

      .decimal {
        font-size: 24rpx;
        margin-top: 4rpx;
      }

      .number {
        color: $u-tips-color;
        font-size: 24rpx;
      }
    }
  }

  .total {
    margin-top: 20rpx;
    text-align: right;
    font-size: 24rpx;

    .total-price {
      font-size: 32rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: space-between;
    align-items: center;

    .btn {
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid $u-border-color;
      font-size: 26rpx;
      text-align: center;
      color: $u-type-info-dark;
    }

    .evaluate {
      color: $u-type-warning-dark;
      border-color: $u-type-warning-dark;
    }
  }
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}
</style>
